<template>
  <div class="classroom">
    <el-row type="flex" :gutter="20" align="middle">
      <el-col :span="4">
        <el-select v-model="query.areaCode" placeholder="请选择单位所属区域">
          <el-option
            v-for="item in regionList"
            :key="item.areaCode"
            :label="item.areaName"
            :value="item.areaCode"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :span="4">
        <el-cascader
          clearable
          placeholder="请选择单位业态"
          v-model="bodyIndustryStr"
          :options="bodyIndustryOptions"
          @change="onChange"
            :props="{
             children:'list',
              label:'bodyIndustryRemarks',
              value:'bodyIndustryRemarks'
          }"
        ></el-cascader>
      </el-col>
      <el-col :span="6">
        <el-input
          maxlength="50"
          clearable
          v-model="query.searchThree"
          placeholder="请输入统一信用代码/许可证号"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          maxlength="50"
          clearable
          v-model="query.searchTwo"
          placeholder="请输入单位名称"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          maxlength="50"
          clearable
          v-model="query.searchOne"
          placeholder="请输入手机号/姓名"
        ></el-input>
      </el-col>
    </el-row>
    <rz-height></rz-height>

    <el-row type="flex" :gutter="20" align="middle">
      <el-col :span="2">
        <el-checkbox
          v-model="query.isspecialfood"
          true-label="1"
          false-label="0"
          >特殊食品</el-checkbox
        >
      </el-col>
      <!-- <el-checkbox
        v-model="query.isinternetsales"
        true-label="1"
        false-label="0"
        >网络经营</el-checkbox
      > -->
      <el-col :span="2">
        <el-checkbox
          v-model="query.islargerkitchen"
          true-label="1"
          false-label="2"
          >中央厨房</el-checkbox
        >
      </el-col>

      <!-- <el-checkbox
        v-model="query.isspecialmedicine"
        true-label="1"
        false-label="0"
        >特殊医学用途配方食品</el-checkbox
      > -->
      <el-col :span="2">
        <el-checkbox
          v-model="query.iscollectivedistribution"
          true-label="1"
          false-label="2"
          >集体用餐配送</el-checkbox
        >
      </el-col>

      <el-col :span="2">
        <el-checkbox v-model="query.pilotUnit" true-label="1" false-label="0"
          >重点单位</el-checkbox
        >
      </el-col>


    <el-col :span="2">
        <el-checkbox v-model="query.highQuality" true-label="1" false-label="0"
          >高质量发展</el-checkbox
        >
      </el-col>
      
      <el-col :span="2">
        <el-button
          type="primary"
          @click="
            query.pageIndex = 1;
            getList();
          "
          >查询</el-button
        ></el-col
      >
      <el-col :span="2">
        <el-button
          @click="
            query.pageIndex = 1;
            exportList();
          "
          >导出</el-button
        ></el-col
      >
    </el-row>

    <rz-height></rz-height>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @sort-change="sortChange"
    >
      <!-- 姓名、手机号、区域名称、单位名称、单位业态（1-2）、履责分值（最新得分、近一年平均分）、操作 -->
      <el-table-column prop="theName" label="姓名" width="80"></el-table-column>
      <el-table-column
        prop="mobileStr"
        label="手机号"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="classHoursSum"
        label="课时(分钟)"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="unitName"
        label="单位名称"
        width="300"
      ></el-table-column>
      <el-table-column prop="" label="区域街道" width="180">
        <template slot-scope="scope">
          <div>{{ scope.row.districtName }}-{{ scope.row.streetName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="单位业态" width="180">
        <template slot-scope="scope">
          <div>
            {{ scope.row.bodyIndustry
            }}{{
              scope.row.bodyIndustryRemarks
                ? "-" + scope.row.bodyIndustryRemarks
                : ""
            }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="indexScore"
        label="履责分值"
        width="120"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        prop="ztzrScore"
        label="近一年的平均分"
        width="150"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        prop="identify"
        label="统一社会信用代码"
        width="180"
      ></el-table-column>
      <el-table-column prop="newLicenseNo" label="许可证" width="180">
        <template slot-scope="scope">
          {{ scope.row.newLicenseNo || "--" }}
        </template>
      </el-table-column>
            <el-table-column prop="createDateTimeStr" label="创建时间" width="120">
      </el-table-column>
      <el-table-column prop="" label="操作" width="120" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="view(scope.row)"
          v-if="scope.row.ztzrScore"
            >食安履责卡</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="query.pageIndex"
      @pagination="getList"
      v-show="total"
    />
  </div>
</template>

<script>
import vueQr from "vue-qr";
import {
  findPerformanceCard,
  exportPerformanceCard,
} from "@/api/modules/chain";
import { findSysDicBusiness } from "@/api/modules/enterprise";
export default {
  components: {
    vueQr,
  },
  props: {},
  data() {
    return {
      query: {
        areaCode: "320500000000",
        bodyIndustry: "",
        bodyIndustryRemarks: "",
        pageIndex: 1,
        pageSize: 10,
        searchOne: "",
        searchThree: "",
        searchTwo: "",
        iscollectivedistribution: "0",
        islargerkitchen: "0",
        isspecialfood: "0",
        order: "",
        pilotUnit:"0"
      },
      bodyIndustryStr: [],
      total: 0,
      list: [],
      tableData: [],
      regionList:[],
      dialogVisible: false,
      bodyIndustryOptions:[],
    };
  },
  computed: {},
  created() {
     if (this.$route.query.code) {
      this.query.areaCode = this.$route.query.code;
    } else {
      this.query.areaCode = "320500000000";
    }
    this.findListByParentCode()
    this.getList();
     this.findSysDicBusiness()
  },
  mounted() {},
  methods: {
              findSysDicBusiness(){
findSysDicBusiness().then((res) => {
        // this.optionsArea = [res.data];
        // console.log(res);
        this.bodyIndustryOptions=res.data
      });
    },
    addItem() {
      this.$router.push("/foodSafety/policy/addPolicy");
    },
    getList() {
      findPerformanceCard(this.query)
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.totalCount;
        })
        .catch((res) => {
          console.log(res);
        });
    },
    exportList() {
      exportPerformanceCard(this.query).then((res) => {
        var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download =
          "导出食安履责" + new Date().getTime() + ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    edit(e) {
      this.$router.push(`/foodSafety/policy/addPolicy?id=${e.id}`);
    },
    view(e) {
      // sessionStorage.setItem("router", "/performance");
      // sessionStorage.setItem("id", e.id);
      // sessionStorage.setItem("newLicenseNo", e.newLicenseNo);
      // this.$router.push({ path: "/enterprise/home" });
          sessionStorage.setItem("newLicenseNo", e.newLicenseNo);
      sessionStorage.setItem("interpretation", e.id);
   this.$router.push({
        path: "/interpretation/home?url=/performance",
      });
    },
    pagination(e) {
      console.log(e);
    },
    deleteById(e) {
      this.$confirm("确定删除这一项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((red) => {
          this.$http
            .deleteByIdPolicy({
              params: {
                id: e.id,
              },
            })
            .then((res) => {
              if (res.code == 200) {
                this.pageIndex = 1;
                this.findFoodSafetyClassList();
                this.$success(res.msg);
              } else {
                this.$error(res.msg);
              }
            })
            .catch((res) => {
              console.log(res);
            });
        })
        .catch((res) => {
          console.log(res);
        });
    },
    pickerChage(e) {
      if (e) {
        this.query.startDate = e[0];
        this.query.endDate = e[1];
      } else {
        this.query.startDate = "";
        this.query.endDate = "";
      }
    },
    onView(e) {
      this.url = e.id;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },

    onChange(e) {
      if (e.length == 2) {
        this.query.bodyIndustry = e[0];
        this.query.bodyIndustryRemarks = e[1];
      } else if (e.length == 1) {
        this.query.bodyIndustry = e[0];
        this.query.bodyIndustryRemarks = "";
      } else {
        this.query.bodyIndustry = "";
        this.query.bodyIndustryRemarks = "";
        this.bodyIndustryStr = "";
      }
    },
    sortChange(e) {
      if (e.prop == "indexScore") {
        if (e.order == "ascending") {
          this.query.order = "4";
        } else if (e.order == "descending") {
          this.query.order = "3";
        } else {
          this.query.order = "";
        }
      } else {
        if (e.order == "ascending") {
          this.query.order = "2";
        } else if (e.order == "descending") {
          this.query.order = "1";
        } else {
          this.query.order = "";
        }
      }
      this.query.pageIndex = 1;
      this.getList();
    },
      findListByParentCode() {
      this.$http
        .findListByParentCode({
          parentCode: this.query.areaCode,
        })
        .then((res) => {
          this.regionList = res.data;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.classroom {
  padding: 20px;
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>


